<template>
    <div>
      <div>
        <div style="display: flex;justify-content: space-between">
          <div>
            <el-input v-model="empName"
                      :disabled="showAdvanceSearchVisible"
                      @keydown.enter.native="initEmps"
                      size="small"
                      style="width: 300px;margin-right: 10px"
                      prefix-icon="el-icon-search"
                      clearable
                      @clear="initEmps"
                      placeholder="请输入员工名进行搜索。。。"></el-input>
            <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initEmps">搜索</el-button>
            <el-button icon="el-icon-search" type="primary" size="small" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
              <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"></i>
              高级搜索</el-button>
          </div>
          <div>
            <el-upload style="display: inline-flex;margin-right: 10px"
                       :headers="headers"
                       :show-file-list="false"
                       :before-upload="beforeUpload"
                       :on-success="onSuccess"
                       :on-error="onError"
                       :disabled="importDisabled"
                       action="/employee/basic/import"
            >
              <el-button type="success" size="small" :icon="importDataBtnIcon" :disabled="importDisabled">
                {{importDataBtnText}}</el-button>
            </el-upload>
            <el-button type="success" size="small" @click="exportData" icon="el-icon-download">
              导出数据</el-button>
            <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
          </div>
        </div>
      </div>
      <transition name="slide-fade">
        <div v-show="showAdvanceSearchVisible" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
          <el-row>
            <el-col :span="5">
              政治面貌：<el-select v-model="searchhValue.politicId" placeholder="政治面貌" size="mini" style="width: 100px">
              <el-option
                  v-for="item in politicsstatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            </el-col>
            <el-col :span="4">
              民族：<el-select v-model="searchhValue.nationId" placeholder="民族" size="mini" style="width: 100px">
              <el-option
                  v-for="item in nations"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            </el-col>
            <el-col :span="4">
              职位：<el-select v-model="searchhValue.jobLevelId" placeholder="职位" size="mini" style="width: 100px">
              <el-option
                  v-for="item in joblevels"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            </el-col>
            <el-col :span="4">
              职称：<el-select v-model="searchhValue.posId" placeholder="职称" size="mini" style="width: 100px">
              <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            </el-col>
            <el-col :span="7">
              聘用形式：<el-radio-group v-model="searchhValue.engageForm" style="margin-top: 3px">
              <el-radio  label="劳动合同">劳动合同</el-radio>
              <el-radio  label="劳务合同">劳务合同</el-radio>
            </el-radio-group>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="5">
              所属部门：<el-popover
                placement="bottom"
                title="请选择部门"
                width="150"
                trigger="manual"
                v-model="visible2">
              <el-tree :data="allDeps"
                       default-expand-all
                       :props="defaultProps"
                       @node-click="searchHandleNodeClick"></el-tree>
              <div slot="reference"
                   @click="showDepView2"
                   style="padding-top: 6px;border-radius:5px;cursor:pointer;
                   align-items: center;padding-left: 8px;
                   box-sizing: border-box;
                   font-size: 10px;
                   width: 100px;display: inline-block;border: 1px solid #dedede;height: 30px" >
                {{inputDepName}}</div>
            </el-popover>
            </el-col>
            <el-col :span="12">
              入职日期：<el-date-picker size="mini"
                                   v-model="searchhValue.beginDateScope"
                                   type="daterange"
                                   value-format="yyyy-MM-dd"
                                   unlink-panels
                                   range-separator="至"
                                   start-placeholder="开始日期"
                                   end-placeholder="结束日期">
            </el-date-picker>
            </el-col>
            <el-col :span="5" :offset="2">
              <el-button  size="mini">取消</el-button>
              <el-button @click="initEmps('advanced')" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </transition>

      <div style="margin-top: 10px">
        <el-table
            :data="emps"
            border
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="序号"
              fixed
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              fixed
              align="left"
              width="75">
          </el-table-column>
          <el-table-column
              prop="workID"
              label="工号"
              width="90">
          </el-table-column>
          <el-table-column
              prop="gender"
              label="性别"
              width="50">
          </el-table-column>
          <el-table-column
              prop="birthday"
              label="出生日期"
              align="left"
              width="100">
          </el-table-column>
          <el-table-column
              prop="idCard"
              label="身份证号码"
              align="left"
              width="170">
          </el-table-column>
          <el-table-column
              prop="wedlock"
              label="婚姻状况"
              width="80">
          </el-table-column>
          <el-table-column
              prop="nation.name"
              label="民族"
              width="50">
          </el-table-column>
          <el-table-column
              prop="nativePlace"
              label="籍贯"
              width="80">
          </el-table-column>
          <el-table-column
              prop="politicsStatus.name"
              label="政治面貌"
              width="110">
          </el-table-column>
          <el-table-column
              prop="email"
              label="电子邮件"
              align="left"
              width="200">
          </el-table-column>
          <el-table-column
              prop="phone"
              align="left"
              label="电话号码"
              width="120">
          </el-table-column>
          <el-table-column
              prop="address"
              label="联系地址"
              align="left"
              width="300">
          </el-table-column>
          <el-table-column
              prop="department.name"
              label="所属部门"
              align="left"
              width="100">
          </el-table-column>
          <el-table-column
              prop="joblevel.name"
              label="职称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="position.name"
              label="职位"
              width="100">
          </el-table-column>
          <el-table-column
              prop="engageForm"
              label="聘用形式"
              align="left"
              width="100">
          </el-table-column>
          <el-table-column
              prop="tiptopDegree"
              label="学历"
              align="left"
              width="60">
          </el-table-column>
          <el-table-column
              prop="school"
              label="毕业院校"
              align="left"
              width="150">
          </el-table-column>
          <el-table-column
              prop="specialty"
              label="专业"
              align="left"
              width="150">
          </el-table-column>
          <el-table-column
              prop="workState"
              label="在职状态"
              align="left"
              width="80">
          </el-table-column>
          <el-table-column
              prop="beginDate"
              label="入职日期"
              align="left"
              width="100">
          </el-table-column>
          <el-table-column
              prop="conversionTime"
              label="转正日期"
              align="left"
              width="100">
          </el-table-column>
          <el-table-column
              prop="beginContract"
              label="合同起始日期"
              align="left"
              width="110">
          </el-table-column>
          <el-table-column
              prop="beginContract"
              label="合同截止日期"
              align="left"
              width="110">
          </el-table-column>
          <el-table-column
              label="合同期限"
              align="left"
              width="100">
            <template slot-scope="scope">
              <el-tag>{{scope.row.contractTerm}}</el-tag>年
            </template>
          </el-table-column>
          <el-table-column
              prop="contractTerm"
              label="操作"
              align="center"
              fixed="right"
              width="200">
            <template slot-scope="scope">
              <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini" type="">编辑</el-button>
              <el-button style="padding: 3px" size="mini" type="primary">查看高级资料</el-button>
              <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end">
          <el-pagination
              background
              @current-change="currentChange"
              @size-change="sizeChange"
              layout="sizes,prev, pager, next, jumper, ->, total"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="80%">
        <div>
          <el-form ref="empForm"
                   :model="emp" :rules="rules">
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名：" prop="name">
                  <el-input size="mini"
                            style="width: 150px"
                            placeholder="请输入员工姓名"
                            v-model="emp.name"
                            prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别：" prop="gender">
                  <el-radio-group v-model="emp.gender" style="margin-top: 12px">
                    <el-radio  label="男">男</el-radio>
                    <el-radio  label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="birthday" label="出生日期：">
                  <el-date-picker
                      v-model="emp.birthday"
                      type="date"
                      size="mini"
                      style="width: 150px"
                      value-format="yyyy-MM-dd"
                      placeholder="出生日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="政治面貌：" prop="politicId">
                  <el-select v-model="emp.politicId" placeholder="政治面貌" size="mini" style="width: 150px">
                    <el-option
                        v-for="item in politicsstatus"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="民族：" prop="nationId">
                  <el-select v-model="emp.nationId" placeholder="民族" size="mini" style="width: 150px">
                    <el-option
                        v-for="item in nations"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="籍贯：" prop="nativePlace">
                    <el-input v-model="emp.nativePlace"
                              placeholder="请输入籍贯"
                              prefix-icon="el-icon-edit"
                              size="mini"
                              style="width: 150px"
                    ></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电子邮箱：" prop="email">
                  <el-input v-model="emp.email"
                            placeholder="请输入电子邮箱"
                            prefix-icon="el-icon-message"
                            size="mini"
                            style="width: 150px"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系地址：" prop="address">
                  <el-input size="mini"
                            v-model="emp.address"
                            prefix-icon="el-icon-edit"
                            style="width: 150px"
                            placeholder="请输入联系地址"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="职称：" prop="posId">
                  <el-select v-model="emp.posId" placeholder="职称" size="mini" style="width: 150px">
                    <el-option
                        v-for="item in positions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职位：" prop="jobLevelId">
                  <el-select v-model="emp.jobLevelId" placeholder="职位" size="mini" style="width: 150px">
                    <el-option
                        v-for="item in joblevels"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属部门：" prop="departmentId">
                  <el-popover
                      placement="bottom"
                      title="请选择部门"
                      width="200"
                      trigger="manual"
                      v-model="visible">
                    <el-tree :data="allDeps"
                             default-expand-all
                             :props="defaultProps"
                             @node-click="handleNodeClick"></el-tree>
                    <div slot="reference"
                         @click="showDepView"
                         style="padding-top: 10px;border-radius:5px;cursor:pointer;
                         align-items: center;padding-left: 8px;
                         box-sizing: border-box;
                         font-size: 10px;
                         width: 150px;display: inline-block;border: 1px solid #dedede;height: 30px" >
                    {{inputDepName}}</div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话号码：" prop="phone">
                  <el-input prefix-icon="el-icon-phone"
                            size="mini"
                            style="width: 150px"
                            placeholder="请输入电话号码"
                            v-model="emp.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="工号：" prop="workID">
                  <el-input prefix-icon="el-icon-edit"
                            disabled
                            size="mini"
                            style="width: 150px"
                            placeholder="请输入工号"
                            v-model="emp.workID">

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学历：" prop="tiptopDegree">
                  <el-select v-model="emp.tiptopDegree" placeholder="学历" size="mini" style="width: 150px">
                    <el-option
                        v-for="item in tiptopDegree"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="毕业院校：" prop="school">
                  <el-input prefix-icon="el-icon-edit"
                            size="mini"
                            style="width: 150px"
                            placeholder="请输入毕业院校"
                            v-model="emp.school">

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="专业名称：" prop="specialty">
                  <el-input prefix-icon="el-icon-edit"
                            size="mini"
                            style="width: 150px"
                            placeholder="请输入专业名称"
                            v-model="emp.specialty">

                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="入职日期：" prop="beginDate">
                  <el-date-picker
                      v-model="emp.beginDate"
                      type="date"
                      size="mini"
                      style="width: 150px"
                      value-format="yyyy-MM-dd"
                      placeholder="入职日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="转正日期：" prop="conversionTime">
                  <el-date-picker
                      v-model="emp.conversionTime"
                      type="date"
                      size="mini"
                      style="width: 150px"
                      value-format="yyyy-MM-dd"
                      placeholder="转正日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同起止日期：" prop="beginContract">
                  <el-date-picker
                      v-model="emp.beginContract"
                      type="date"
                      size="mini"
                      style="width: 150px"
                      value-format="yyyy-MM-dd"
                      placeholder="合同起止日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同截止日期：" prop="endContract">
                  <el-date-picker
                      v-model="emp.endContract"
                      type="date"
                      size="mini"
                      style="width: 150px"
                      value-format="yyyy-MM-dd"
                      placeholder="合同截止日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="身份证号码：" prop="idCard">
                  <el-input prefix-icon="el-icon-postcard"
                            size="mini"
                            style="width: 150px"
                            placeholder="请输入身份证号码"
                            v-model="emp.idCard">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="聘用形式：" prop="engageForm">
                  <el-radio-group v-model="emp.engageForm" style="margin-top: 12px">
                    <el-radio  label="劳动合同">劳动合同</el-radio>
                    <el-radio  label="劳务合同">劳务合同</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚姻状况：" prop="wedlock">
                  <el-radio-group v-model="emp.wedlock" style="margin-top: 12px">
                    <el-radio  label="未婚">未婚</el-radio>
                    <el-radio  label="已婚">已婚</el-radio>
                    <el-radio  label="离异">离异</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dooAddEmp">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  methods:{
    onSuccess(){
      this.importDataBtnIcon = "el-icon-upload2";
      this.importDataBtnText = "导入数据";
      this.importDisabled = false;
      this.initEmps();
    },
    onError(){
      this.importDataBtnIcon = "el-icon-upload2";
      this.importDataBtnText = "导入数据";
      this.importDisabled = false;
    },
    //上传成功之前
    beforeUpload(){
      this.importDataBtnIcon = "el-icon-loading";
      this.importDataBtnText = "正在导入。。。";
      this.importDisabled = true;
    },
    //导出
    exportData(){
      this.$downLoadRequest("/employee/basic/export");
    },
    //编辑员工信息
    showEditEmpView(data){
      this.title = "添加员工";
      this.emp = data;
      this.inputDepName = data.department.name;
      this.initPositions();
      this.dialogVisible = true;
    },
    //删除员工
    deleteEmp(data){
      this.$confirm('此操作将永久删除['+data.name+']员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$deleteRequest("/employee/basic/"+data.id).then(resp=>{
          if(resp){
            this.initEmps();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //添加员工
    dooAddEmp(){
      if(this.emp.id){
        this.$refs['empForm'].validate(valid=>{
          if(valid){
            this.$putRequest("/employee/basic/",this.emp).then(resp=>{
              if(resp){
                this.dialogVisible = false;
                this.initEmps();
              }
            })
          }
        })
      }else{
        this.$refs['empForm'].validate(valid=>{
          if(valid){
            this.$postRequest("/employee/basic/",this.emp).then(resp=>{
              if(resp){
                this.dialogVisible = false;
                this.initEmps();
              }
            })
          }
        })
      }
    },

    searchHandleNodeClick(data){
      this.searchhValue.departmentId = data.id;
      this.inputDepName = data.name;
      this.visible2 = !this.visible2;
    },
    //树形控件点击事件
    handleNodeClick(data){
      this.emp.departmentId = data.id;
      this.inputDepName = data.name;
      this.visible = !this.visible;
    },
    //部门弹框
    showDepView2(){
      this.visible2 = !this.visible2;
    },
    //部门弹框
    showDepView(){
      this.visible = !this.visible;
    },
    //获取最大工号
    getMaxWorkId(){
      this.$getRequest("/employee/basic/maxWorkId").then(resp=>{
        if(resp){
          this.emp.workID = resp.obj;
        }
      })
    },
    //职位初始化
    initPositions(){
      if(!window.sessionStorage.getItem("positions")){
        this.$getRequest("/employee/basic/positions").then(resp=>{
          if(resp){
            this.positions = resp;
            window.sessionStorage.setItem("positions",JSON.stringify(resp));
          }
        })
      }else {
        this.positions = JSON.parse(window.sessionStorage.getItem("positions"));
      }
    },
    //初始化下拉数据
    initData(){
      //加载民族
      if(!window.sessionStorage.getItem("nations")){
        this.$getRequest("/employee/basic/nations").then(resp=>{
          if(resp){
            this.nations = resp;
            window.sessionStorage.setItem("nations",JSON.stringify(resp));
          }
        })
      }else {
        this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
      }

      //加载职位
      if(!window.sessionStorage.getItem("joblevels")){
        this.$getRequest("/employee/basic/joblevels").then(resp=>{
          if(resp){
            this.joblevels = resp;
            window.sessionStorage.setItem("joblevels",JSON.stringify(resp));
          }
        })
      }else {
        this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"));
      }

      //加载政治面貌
      if(!window.sessionStorage.getItem("politicsstatus")){
        this.$getRequest("/employee/basic/politicsstatus").then(resp=>{
          if(resp){
            this.politicsstatus = resp;
            window.sessionStorage.setItem("politicsstatus",JSON.stringify(resp));
          }
        })
      }else {
        this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"));
      }

      //加载部门
      if(!window.sessionStorage.getItem("deps")){
        this.$getRequest("/employee/basic/deps").then(resp=>{
          if(resp){
            this.allDeps = resp;
            window.sessionStorage.setItem("allDeps",JSON.stringify(resp));
          }
        })
      }else {
        this.allDeps = JSON.parse(window.sessionStorage.getItem("allDeps"));
      }


    },
    //展示添加员工页面
    showAddEmpView(){
      this.title = "添加员工";
      this.dialogVisible = true;
      this.inputDepName = "";
      this.emp = {
        id: null,
        name: "",
        gender: "",
        birthday: "",
        idCard: "",
        wedlock: "",
        nationId: null,
        nativePlace: "",
        politicId: null,
        email: "",
        phone: "",
        address: "",
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: "",
        tiptopDegree: "",
        specialty: "",
        school: "",
        beginDate: "",
        workState: "在职",
        workID: null,
        contractTerm: null,
        conversionTime: "",
        notWorkDate: null,
        beginContract: "",
        endContract: "",
        workAge: null,
        salaryId: null
      },
      //加载职称
      this.initPositions();
      //获取工号
      this.getMaxWorkId();
    },
    //每页条数事件
    sizeChange(size){
      this.size = size;
      this.initEmps();
    },
    //当前页事件
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initEmps();
    },
    //初始化所有员工
    initEmps(type){
      this.loading = true;
      let url = "/employee/basic/?currentPage="+this.currentPage+"&size="+this.size;
      if(type && type === "advanced"){
        if(this.searchhValue.politicId){
          url+="&politicId=" + this.searchhValue.politicId;
        }
        if(this.searchhValue.posId){
          url+="&posId=" + this.searchhValue.posId;
        }
        if(this.searchhValue.jobLevelId){
          url+="&jobLevelId=" + this.searchhValue.jobLevelId;
        }
        if(this.searchhValue.nationId){
          url+="&nationId=" + this.searchhValue.nationId;
        }
        if(this.searchhValue.engageForm){
          url+="&engageForm=" + this.searchhValue.engageForm;
        }
        if(this.searchhValue.departmentId){
          url+="&departmentId=" + this.searchhValue.departmentId;
        }
        if(this.searchhValue.beginDateScope){
          url+="&beginDateScope=" + this.searchhValue.beginDateScope;
        }
      }else {
        url+="&name="+this.empName
      }

      this.$getRequest(url).then(resp=>{
        this.loading = false;
        if(resp){
          this.emps = resp.data;
          this.total = resp.total;
        }
      })
    }
  },
  name: "EmpBasic",
  data(){
    return {
      searchhValue:{
        politicId:null,
        nationId:null,
        posId:null,
        jobLevelId:null,
        engageForm:"",
        departmentId:null,
        beginDateScope:null
      },
      showAdvanceSearchVisible:false,
      headers:{
        Authorization:window.sessionStorage.getItem("tokenStr")
      },
      importDisabled:false,
      importDataBtnText:"导入数据",
      importDataBtnIcon:"el-icon-upload2",
      title:"",
      emps:[],
      inputDepName:"",
      loading:false,
      total:0,
      size:10,
      currentPage:1,
      empName:"",
      dialogVisible:false,
      nations:[],
      joblevels:[],
      positions:[],
      politicsstatus:[],
      tiptopDegree:['博士','硕士','本科','大专','高中','初中','小学','其他'],
      visible:false,
      visible2:false,
      defaultProps:{
        children: 'children',
        label: 'name'
      },
      allDeps:[],
      emp:{
        id: null,
        name: "",
        gender: "",
        birthday: "",
        idCard: "",
        wedlock: "",
        nationId: null,
        nativePlace: "",
        politicId: null,
        email: "",
        phone: "",
        address: "",
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: "",
        tiptopDegree: "",
        specialty: "",
        school: "",
        beginDate: "",
        workState: "在职",
        workID: null,
        contractTerm: null,
        conversionTime: "",
        notWorkDate: null,
        beginContract: "",
        endContract: "",
        workAge: null,
        salaryId: null
      },
      rules:{
        name:[{required:true,message:'请输入员工名',trigger:'blur'}],
        gender:[{required:true,message:'请输入员性别',trigger:'blur'}],
        birthday:[{required:true,message:'请输入出生日期',trigger:'blur'}],
        idCard:[
            {required:true,message:'请输入身份证号码',trigger:'blur'},
            {pattern:/^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
              message:'身份证号码不正确',
              trigger:'blur'}
        ],
        wedlock:[{required:true,message:'请输入婚姻状况',trigger:'blur'}],
        nationId:[{required:true,message:'请输入民族',trigger:'blur'}],
        nativePlace:[{required:true,message:'请输入籍贯',trigger:'blur'}],
        politicId:[{required:true,message:'请输入政治面貌',trigger:'blur'}],
        email:[
            {required:true,message:'请输入邮箱地址',trigger:'blur'},
            {type:'email',message:'邮箱地址格式不正确',trigger:'blur'}
        ],
        phone:[{required:true,message:'请输入电话号码',trigger:'blur'}],
        address:[{required:true,message:'请输入员工地址',trigger:'blur'}],
        departmentId:[{required:true,message:'请输入部门名称',trigger:'blur'}],
        jobLevelId:[{required:true,message:'请输入职称',trigger:'blur'}],
        posId:[{required:true,message:'请输入职位',trigger:'blur'}],
        engageForm:[{required:true,message:'请输入聘用形式',trigger:'blur'}],
        tiptopDegree:[{required:true,message:'请输入学历',trigger:'blur'}],
        specialty:[{required:true,message:'请输入专业',trigger:'blur'}],
        school:[{required:true,message:'请输入毕业院校',trigger:'blur'}],
        beginDate:[{required:true,message:'请输入入职日期',trigger:'blur'}],
        workID:[{required:true,message:'请输入员工工号',trigger:'blur'}],
        workState:[{required:true,message:'请输入工作状态',trigger:'blur'}],
        contractTerm:[{required:true,message:'请输入合同期限',trigger:'blur'}],
        conversionTime:[{required:true,message:'请输入转正日期',trigger:'blur'}],
        notWorkDate:[{required:true,message:'请输入离职日期',trigger:'blur'}],
        beginContract:[{required:true,message:'请输入合同起始日期',trigger:'blur'}],
        endContract:[{required:true,message:'请输入截止日期',trigger:'blur'}],
        workAge:[{required:true,message:'请输入工龄',trigger:'blur'}],
      }
    }
  },
  mounted() {
    this.initEmps();
    this.initData();
    this.initPositions();
  }

}
</script>

<style scoped>
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>